<template>
    <div id="baidu-map" class="bm-view"></div>
</template>

<script setup>
import { bsDeptInfo } from "@/api/partybuilding/Org";
import mainMarkerIcon from "@/assets/images/partybanner1.png";
import redMarkerIcon from "@/assets/images/redbanner-h1.png";
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const map = ref(null);
const centerPoint = ref({lng: 111.195740, lat: 34.771330}); // 地图中心点
const centerData = ref(null); // 地图中心点数据（包括组织ID）
const thirtyDataArray = ref([]); // 10公里内的组织信息数组
const indexThirty = ref(0); // 10公里内的组织信息数组的索引
let loopMapTimer = null;
const contentStyle = {
    minWidth : '350vw',     // 信息窗口宽度
    maxHeight: '210vh',     // 信息窗口高度
    offset: new T.Point(-9, -39)
};
const show = (dataArray) => {
    addMarkerData(dataArray);
};
defineExpose({
    show
});
function addMarkerData(dataArray) {
    map.value.clearOverLays();
    //遍历标记数组，添加标记
    dataArray.forEach(item => {
        let tmpPoint = new T.LngLat(item.lng, item.lat); // 创建点坐标
        // 添加地图图标
        let tmpIcon = null; // 设置图标大小和图片地址
        if (item.isMainIcon){
            tmpIcon = new T.Icon({
                iconUrl: mainMarkerIcon,
                iconSize: new T.Point(50, 50),
                iconAnchor: new T.Point(45, 50)
            });
        }else{
            tmpIcon = new T.Icon({
                iconUrl: redMarkerIcon,
                iconSize: new T.Point(50, 50),
                iconAnchor: new T.Point(45, 50)
            });
        }
        let marker = new T.Marker(tmpPoint, {icon: tmpIcon});  // 创建标注
        let label = new T.Label({
            text: item.title,
            position: marker.getLngLat(),
            offset: new T.Point(-99, 19)
        });
        // 自定义文本标注样式
        // if (item.isMainIcon){
        //     label.setStyle({
        //         border:'1px solid #d81e06'
        //     });
        // }else{
        //     label.setStyle({
        //         border:'1px solid #f3e70b'
        //     });
        // }
        map.value.addOverLay(label); // 为marker定义标签
        // 点标记添加点击事件
        marker.addEventListener('click', function () {
            // 获取组织详情
            getOrgDetail(item.id, tmpPoint);
        });
        map.value.addOverLay(marker);               // 将标注添加到地图中
        if (dataArray!=null && dataArray.length > 0){
            // 获取第一个数据作为中心点数据
            centerData.value = dataArray[0];
        }
    })
    
    // 获取10公里内的组织信息数组
    getThirtyData(dataArray);

    setTimeout(() => {
        loopAutoPlayWindow();
    }, 1);

    //循环播放离中心点10公里内的组织信息弹出框
    loopMapTimer = setInterval(() => {
        loopAutoPlayWindow();
    }, 10000); // 每10秒更新一次数据
}

// 获取10公里内的组织信息数组
function getThirtyData(dataArray) {
    let thirtyData = [];
    dataArray.forEach(item => {
        let tmpPoint = new T.LngLat(item.lng, item.lat); // 创建点坐标
        let distance = map.value.getDistance(centerPoint.value, tmpPoint);  // 计算节点之间的距离:
        if (distance <= 2000){// 半径10公里=10000米
            thirtyData.push(item);
        }
    });
    thirtyDataArray.value = thirtyData;
}

//循环播放离中心点10公里内的组织信息弹出框
function loopAutoPlayWindow() {
    if (thirtyDataArray.value!=null && thirtyDataArray.value.length > 0){
        // 创建点坐标
        let tmpPoint = new T.LngLat(thirtyDataArray.value[indexThirty.value].lng, thirtyDataArray.value[indexThirty.value].lat);
        // 获取组织详情并显示弹出框
        getOrgDetail(thirtyDataArray.value[indexThirty.value].id, tmpPoint);
        indexThirty.value = indexThirty.value + 1;
        if (indexThirty.value>=thirtyDataArray.value.length){
            indexThirty.value = 0;
        }
    }
}

// 获取组织详情并显示弹出框
function getOrgDetail(orgId, point) {
    let params = {
        deptId: orgId
    };
    bsDeptInfo(params).then(response => {
        let tmpObj = response.data;
        let returnObj = {};
        if (tmpObj!=null){
            returnObj.deptName = tmpObj.t1.deptName; //组织名称
            returnObj.statMember = tmpObj.t1.statMember==null?0:tmpObj.t1.statMember;//组织人数、党员人数
            returnObj.statTeamPerson = tmpObj.t1.statTeamPerson==null?0:tmpObj.t1.statTeamPerson;//班子人数
            if (tmpObj.t2!=null && tmpObj.t2.length > 0){
                returnObj.pictureUrl = tmpObj.t2[0].pictureUrl!=null?tmpObj.t2[0].pictureUrl:''; //组织图片
                returnObj.userName = tmpObj.t2[0].userName!=null?tmpObj.t2[0].userName:''; //组织负责人姓名
                returnObj.xzDuty = tmpObj.t2[0].xzDuty!=null?tmpObj.t2[0].xzDuty:''; //组织负责人职务
            }else{
                returnObj.pictureUrl = ''; //组织图片
                returnObj.userName = ''; //组织负责人姓名
                returnObj.xzDuty = ''; //组织负责人职务
            }
        }
        let imageHtml = '';
        if (returnObj.pictureUrl!=null && returnObj.pictureUrl!=''){
            imageHtml = '<image src="'+baseUrl+returnObj.pictureUrl+'" width="90px" height="90px">'; 
        }
        let tmpHtml = '<div class="custom_bubble_pop">'+
                '   <p style="font-size:16px;font-weight:bold;margin-bottom:10px;border-bottom:1px solid #ccc;">组织信息</p>'+
                '   <table class="bd-table">' +
                '       <tr><td>组织名称：</td><td colspan="2">'+returnObj.deptName+'</td></tr>' +
                '       <tr><td>班子成员数：</td><td>'+returnObj.statTeamPerson+'</td><td rowspan="4" style="text-align:center">'+imageHtml+'</td></tr>' +
                '       <tr><td>党员人数：</td><td>'+returnObj.statMember+'</td></tr>' +
                '       <tr><td>负责人：</td><td>'+returnObj.userName+'</td></tr>' +
                '       <tr><td>职务：</td><td>'+returnObj.xzDuty+'</td></tr>' +
                '       <tr><td colspan="3" style="text-align:left;color:#d71616;font-size:15px;font-weight:bold;"><a href="/org/Org" target="_blank">查看详情</a></td></td></tr>' +
                '   </table>'+
                '</div>';
        var infoWindow = new T.InfoWindow(tmpHtml, contentStyle); // 创建信息窗口对象
        map.value.openInfoWindow(infoWindow, point); // 开启信息窗口
    });
}

onMounted(() => {
    // 创建地图实例
    map.value = new T.Map("baidu-map"); // Map构造函数名
    var point = new T.LngLat(centerPoint.value.lng, centerPoint.value.lat); // 创建点坐标
    map.value.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别
    //创建对象
    var ctrl = new T.Control.MapType();
    //添加控件
    map.value.addControl(ctrl);

    //创建缩放平移控件对象
    var control = new T.Control.Zoom();
    control.setPosition(T_ANCHOR_BOTTOM_RIGHT);
    //添加缩放平移控件
    map.value.addControl(control);

    // 创建回归图标控件
    let newControl = new T.Control({position: T_ANCHOR_BOTTOM_RIGHT});
    newControl.onAdd = function () {
        var container = document.createElement("div");
        container.className = 'home-control';
        container.innerHTML = '<img src="/src/assets/images/home.png" style="width: 29px;height: 29px;cursor: pointer;" title="回到中心点">';
        container.onclick = function() {
            map.value.panTo(centerPoint.value); // 初始化地图，设置中心点坐标和地图级别
            getOrgDetail(centerData.value.id, centerPoint.value);
        };
        return container;
    };
    //添加回归控件
    map.value.addControl(newControl);
})

onUnmounted(() => {
  clearInterval(loopMapTimer);
});
</script>
<style lang="scss" scoped>
:deep(.tdt-infowindow-content-wrapper, .tdt-infowindow-tip) {
    background-color: transparent;
}
:deep(.tdt-infowindow-content-wrapper) {
    padding: 0;
}
:deep(.tdt-infowindow-content) {
    margin: 0;
}
:deep(.tdt-infowindow-tip-container) {
    display: none;
}
::v-deep .custom_bubble_pop {
    background-color: rgba(203, 44, 34, 0.7) !important;
    border: 2px solid #cf554f !important;
    width: 340px !important;
    text-align: left;
    color: #fff !important;
    font-size: 14px !important;
}
.bd-table {
    border-collapse: collapse;
}
.bm-view {
    position: absolute;
    top: 6%;
    left: 0;
    width: 100%;
    min-width: 100vw;
    height: 94%; /* 必须设置宽高 */
    z-index: 11!important;
}
</style>